<template>
  <a-table
    v-bind="tableProps"
  >
    <a slot="number" slot-scope="text, row" @click="hanlderRow(row)">{{ text }}</a>

    <template #status="text, row">
      <a @click="hanlderRow(row)">
        <i :class="`icon icon--${text === 2 ? 'red' : ''}`" />
        {{ text | status }}</a>
    </template>
  </a-table>
</template>
<script>
import { getRepaymentTasks } from '@/api/flow/work'
import table from '@/utils/mixins/search/table'
import columns from '@/views/credit/be-overdue/mixins/columns'

export default {
  mixins: [table, columns],

  filters: {
    status (value) {
      switch (value) {
        case 0:
          return '待还款'

        case 1:
          return '已结清'

        case 2:
          return '逾期待还款'

        case 3:
          // 逾期已还
          return '已结清'

        default:
          return '/'
      }
    },
  },

  created () {
    this.tableHooksRequest()
  },

  computed: {
    tableParams () {
      const { per_page, page } = this.pagination
      return [per_page, page, this.tableArgs]
    },
  },

  methods: {
     async tableHooksRequest () {
      try {
        const res = await this.getTableDatas(getRepaymentTasks, this.tableParams)
        return res
      } catch (error) {
        throw new Error(error)
      }
    },

    // hanlder row
    hanlderRow ({ task_id: tid, order_id: oid }) {
      this.$router.push({
        name: 'BeOverdueContent',
        params: { tid, oid },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: $theme-color;
  margin-right: $margin-base;
}

.icon--red {
  background-color: $red;
}
</style>
